export default {
  // 标识为函数组件，可以拿到render 函数的第二参数（函数组件上下文）render(createElement, context)
  functional: true,
  render(h, { parent, data }) {
    // 先渲染父组件的router-view，再渲染子组件的router-view => 【Home，Home/A】
    // 添加一个标识，表示当前组件为router-view
    data.routerView = true;

    // 从router-view 的父组件上拿到$route 属性（里面包含着路由的映射关系 => 【Home，Home/A】）
    const route = parent.$route;
    // 递归的深度标识
    let depth = 0;

    while (parent) {
      // _vnode 对应的是组件的渲染函数中的虚拟节点，$vnode 代表的是渲染的组件本身，$vnode 是_vnode 的父亲，
      // 如果父组件中有router-view，则深度需要+1，说明父组件的router-view 已经渲染完了，需要渲染子组件本身
      if (parent.$vnode && parent.$vnode.data.routerView) {
        depth++;
      }

      // 拿到router-view 的父组件，不停的向上查找父组件
      parent = parent.$vnode;
    }

    // 拿到当前渲染router-view 对应的路由记录，先渲染父组件，渲染完后遇到子组件下的router-view 再渲染子组件的
    const record = route.matched[depth];

    if (!record) {
      return h();
    }

    return h(record.component, data)
  }
}
